<template>
  <div class="userBehavior">
    <el-form class="formList"
      ref="queryForm"
      :inline="true"
      label-width="60px">
      <el-form-item label="时间">
        <el-date-picker v-model="selectTime"
          type="daterange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left: 20px;">
        <el-button type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh"
            size="mini"
            @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>
    <div class="show-chart-box1">
      <div class="show-chart-pie">
        <div class="show-chart-pie-in">
          <div class="show-user-times">{{openTimes}}</div>
          <div class="show-user-times-desc">使用小程序次数</div>
        </div>
      </div>
      <div class="show-chart-vertical-bar">
        <YDBarChart :yData="orderLegendData1"
          v-if="isShowChart"
          key="page"
          :seriesData="orderSeriesData1"
          :isShowLegend="true"
          :isShowYAxisLine="false"
          barWidth="10"
          cHeight="360"
          :dataZoom="[
            {
              type: 'slider',
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              fillerColor: 'rgba(131,152,144,0.2)',
              width: 30,
              height: '90%',
              handleSize: 8,
              showDataShadow: false,
              start: 70,
              end: 100,
              right: '0%'
            }
          ]"
          :chartColor="chartColor" />
      </div>
    </div>

    <div class="show-chart-box2">
      <YDBarChart :xData="orderLegendData2"
        v-if="isShowChart"
        key="product"
        :seriesData="orderSeriesData2"
        :isShowLegend="true"
        :isShowYAxisLine="false"
        barWidth="10"
        cHeight="360"
        :dataZoom="[
          {
            type: 'slider',
            show: true,
            fillerColor: 'rgba(131,152,144,0.2)',
            dataBackground: {
              lineStyle: {
                opacity: 0
              },
              areaStyle: {
                opacity: 0
              }
            },
            start: 0,
            end: 30,
          }
        ]"
        :chartColor="chartColor" />
    </div>
  </div>
</template>

<script>
import {
  userBehavior
} from "@/api/customer/Info";
import YDBarChart from '@/components/Chart/BarChart'; // 柱状图

export default {
  data () {
    return {
      selectTime: [],
      chartColor: ['#839890', '#C8DDD4', '#EFEAE0', '#E6E3DD', '#5D5F61', '#1C241D', '#EAC98A', '#F4E3B0', '#F6E4DC', '#535557'],
      orderLegendData1: [],
      orderSeriesData1: [],

      orderLegendData2: [],
      orderSeriesData2: [],

      isShowChart: false,
      openTimes: 0,
    };
  },
  components: {
    YDBarChart
  },
  created () {
    let curTime = new Date().getTime(), befTime = curTime - 30 * 24 * 60 * 60 * 1000
    this.selectTime = [this.setDateFormat(befTime), this.setDateFormat(curTime)]
  },
  methods: {
    setDateFormat (time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;

      return `${y}-${m}-${d}`
    },
    handleQuery () {
      this.getData()
    },
    dateChange () {
      // console.log(this.selectTime, '----')
      if (!this.selectTime) {
        this.selectTime = []
      }
    },
    init () {
      setTimeout(() => {
        this.isShowChart = true
        this.getData()
      })
    },
    getData () {
      userBehavior({
        customerId: this.$route.params && this.$route.params.customerUid,
        startTime: this.selectTime[0] ? `${this.selectTime[0]}` : '',
        endTime: this.selectTime[1] ? `${this.selectTime[1]}` : ''
      })
        .then(res => {
          if (res) {
            let { data } = res
            let { page, product } = data
            this.openTimes = data.openTimes
            page.series.forEach(item => {
              item.type = 'bar'
            })
            this.orderLegendData1 = page.yAxis
            this.orderSeriesData1 = page.series

            product.series.forEach(item => {
              item.type = 'bar'
            })
            this.orderLegendData2 = product.yAxis
            this.orderSeriesData2 = product.series
          }
        })
    }
  }
};
</script>

<style lang="scss" scoped>
.show-chart-box1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 360px;
  border: 1px solid #eee;
  padding: 0 0 0 30px;
  .show-chart-pie {
    width: 260px;
    height: 260px;
    padding: 12px;
    border-radius: 50%;
    background-color: #839890;
    margin-right: 20px;
    .show-chart-pie-in {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .show-user-times {
        font-size: 80px;
        color: #ffa082;
      }
      .show-user-times-desc {
        font-size: 14px;
        color: #999;
      }
    }
  }
  .show-chart-vertical-bar {
    flex: 1;
    overflow: hidden;
    height: 100%;
  }
}

.show-chart-box2 {
  width: 100%;
  height: 360px;
  margin-top: 30px;
  border: 1px solid #eee;
}
</style>
